<template>
    <div>
      <!-- 图表容器 -->
      <div ref="gaugeChart" style="width: 100%; height: 450%; margin-top: -40px;"></div>
      <!-- 添加一个按钮来触发数据更新 -->

    </div>
  </template>
  
  <script>
  import * as echarts from 'echarts';
  
  export default {
    name: 'GaugeChart',
    data() {
      return {
        option: {
          series: [
            {
              type: 'gauge',
              startAngle: 180,
              endAngle: 0,
              min: 0,
              max: 100,
              splitNumber: 4, // 添加splitNumber，将刻度分为4段
              axisLine: {
                lineStyle: {
                  width: 30,
                  color: [
                    [0.25, '#67e0e3'],
                    [0.5, '#37a2da'],
                    [0.75, '#37a2da'],
                    [1, '#12de8f']
                  ]
                }
              },
              pointer: {
                itemStyle: {
                  color: 'auto'
                }
              },
              axisTick: {
                distance: -30,
                length: 5,
                lineStyle: {
                  color: '#fff',
                  width: 2
                }
              },
              splitLine: {
                distance: -30,
                length: 30,
                lineStyle: {
                  color: '#fff',
                  width: 4
                }
              },
              axisLabel: {
                color: 'inherit',
                distance: 40,
                fontSize: 14, // 将字体大小从20调整为14
                formatter: function (value) {
                    if (value === 0) return '0%';
                    if (value === 25) return '25%';
                    if (value === 50) return '50%';
                    if (value === 75) return '75%';
                    if (value === 100) return '100%';
                    return '';
                }
            },
            detail: {
                valueAnimation: true,
                formatter: '生产进度100%',
                color: 'white',
                offsetCenter: [0, '30%'],
                fontSize: 18 // 添加 fontSize 属性，调整文字大小
            },
              data: [
                {
                  value: 100
                }
              ]
            }
          ]
        }
      };
    },
    mounted() {
      this.initChart();
    },
    methods: {
      initChart() {
        // 初始化 ECharts 实例
        this.chart = echarts.init(this.$refs.gaugeChart);
        // 设置图表配置项
        this.chart.setOption(this.option);
      },
    
    }
  };
  </script>
  
  <style scoped>
  /* 可选的样式 */
  </style>
  